<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>火影忍者手游</title>

<style type="text/css">
body,td,th {
	font-family: "微软雅黑";
	font-size: 14px;
	color: #333;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #f4f4f4;
}
#top {
	height: 350px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/login.jpg);
}
#top #top-grey {
	height: 130px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/grey.png);
}
#top #bar-x {
	height: 72px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f7f7f7;
}
#top #top-grey #bar-x #logo {
	height: 39px;
	width: 143px;
	margin-top: 15px;
	margin-left: 30px;
	float: left;
}
#top #top-grey #bar-x #menu {
	height: 20px;
	width: 460px;
	float: left;
	margin-left: 115px;
	margin-top: 26px;
}
#top #top-grey #bar-x #menu2 {
	font-family: "微软雅黑";
	font-size: 11px;
	height: 20px;
	width: 70px;
	float: left;
	margin-left: 170px;
	margin-top: 25px;
	border: 1px solid #f7f7f7;
	border-radius: 3px;
	text-align: center;
	line-height: 20px;
}
#top #top-grey #bar-x #menu #menu-tab {
	font-family: "微软雅黑";
	font-size: 13px;
	color: #ffffff;
	float: left;
	height: 20px;
	width: 60px;
	margin-left: 5px;
	text-align: center;
	line-height: 20px;
	border-radius: 2px;
}
.d_over{
	background-color:#31c27c;
	transition-duration: 1s;
}
.d_out{
	background-color:rgba(0,0,0,0);
}
.c_over{
	background-color:#31c27c;
	transition-duration: 1s;
}
.c_out{
	background-color:#f6f6f6;
}
a:link {
	color: #f2f2f2;
	text-decoration: none;
}
a:visited {
	color: #f2f2f2;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#main {
	height: 670px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
}
#main #title {
	height: 26px;
	width: 140px;
	margin-right: auto;
	margin-left: auto;
	font-family: "微软雅黑";
	font-size: 22px;
	font-weight: bold;
	color: #000;
	text-align: center;
	line-height: 26px;
	padding-top: 30px;
	letter-spacing: 1px;
}
#main #green {
	background-color: #31c27c;
	height: 3px;
	width: 23px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#down {
	font-family: "微软雅黑";
	font-size: 12px;
	color: #FFF;
	background-color: #2b2b2b;
	height: 90px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
}
#down #down1 {
	height: 40px;
	width: 835px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 26px;
}

a.black:link {
	color: #000000;
	text-decoration: none;
}
a.black:visited {
	text-decoration: none;
	color: #000000;
}
a.black:hover {
	text-decoration: none;
	color: #31c27c;
}
a.black:active {
	text-decoration: none;
}
a.blue:link {
	color: #118cff;
	text-decoration: none;
}
a.blue:visited {
	text-decoration: none;
	color: #118cff;
}
a.blue:hover {
	text-decoration: none;
	color: #31c27c;
}
a.blue:active {
	text-decoration: none;
}
#wenzhang {
	height: 340px;
	width: 920px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	font-family: "微软雅黑";
	font-size: 13px;
	line-height: 25px;
	color: #000;
}
.ayahei {
	font-family: "微软雅黑";
	font-size: 15px;
	font-weight: bold;
	color: #000;
}
#main #line855 {
	height: 3px;
	width: 855px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCC;
	margin-right: auto;
	margin-left: auto;
}
 .divAll{
	width: 450px;
	font-family: "微软雅黑";
	margin: 30px auto;
   }
 #titles{ 
   font-weight:bold; 
   font-size:12px; 
   height:50px; 
   line-height:50px; 
   background:#FFF9F3; 
   text-align:center;  
   border:1px solid #CCC;; 
   }
 #contents{
	margin-top: 20px;
	border: 1px solid #CCC;
	font-family: "微软雅黑";
	font-size: 13px;
	background-color: #FFFFFF;
    }
  #form-itemGroup{ 
   padding:5px;  
    }
  #form-itemGroup label{ 
    display:inline-block; 
    width:100px; 
    height:32px; 
    line-height:32px; 
    color:#666; 
    text-align:right; 
    }
  #form-itemGroup .userName{
	width: 180px;
	height: 40px;
	line-height: 40px;
	border: 1px solid #CCC;
    }  
  #form-itemGroup .default{
	width: 350px;
	height: 32px;
	line-height: 32px;
	color: #999;
    } 
  #form-itemGroup .error{ 
    height:32px; 
    line-height:32px; 
    color:#F00; 
    }
  #form-itemGroup .success{ 
    height:32px; 
    line-height:32px; 
    color:#096; 
    }  
  .divBtn{
	margin-top: 20px;
	margin-left: 20px;
	width: 100px;
	height: 32px;
	line-height: 32px;
	background-color: #999;
	margin-bottom: 10px;
	color: #ffffff;
	font-weight: bold;
	border: none;
    } 

</style>
</head>

<body>
<div id="top">
  <div id="top-grey">
    <div id="bar-x">
      <div id="logo"><a href="index.html"><img src="images/logo.png" alt="" width="143" height="39"></a></div>
      <div id="menu">
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="index.html">首页</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="introductions.html">简介</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="list.html">推荐</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="topic.html">专题</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="news.html">资讯</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="music.html">原声</a></div>
        <div id="menu-tab" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="download.html">下载</a></div>
      </div>
      <div id="menu2" class="d_out" onmouseover="this.className='d_over'" onmouseout="this.className='d_out'"><a href="login.html">注册/登录</a></div>
    </div>
  </div>
  </div>
<div id="main">
  <div id="title"><span class="ayahei">登录</span> / <a href="register.html" class="black">去注册</a></div>
  <div id="green"></div>
  <div class="divAll">
  <div id="contents"> 
    <h3>&nbsp;&nbsp;&nbsp;&nbsp; 欢迎登录火影忍者手游</h3> 
   <hr width="95%" color="#f2f2f2"/> 
   <form action="#" onSubmit="return checkForm()"> 
    <div id="form-itemGroup"> 
      <label for="userName">用&nbsp; 户&nbsp; 名：</label> 
      <input type="text" id="userName" class="userName" onBlur="checkUserName()" oninput="checkUserName()"> 
      <span class="default" id="nameErr">至少3位用户名</span> 
    </div> 
    <div id="form-itemGroup"> 
      <label for="userPasword">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码：</label> 
      <input type="password" id="userPasword" class="userName" onBlur="checkPassword()" oninput="checkPassword()"> 
      <span class="default" id="passwordErr">4到8位的密码</span> 
    </div>
    <div> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button type="submit" class="divBtn">登录</button> 
  </div> 
   </form> 
 </div> 
</div>
 <script type="text/javascript"> 
 function checkForm(){ 
  var nametip = checkUserName(); 
  var passtip = checkPassword();  
  var conpasstip = ConfirmPassword(); 
  var phonetip = checkPhone(); 
  return nametip && passtip && conpasstip && phonetip; 
  } 
  //验证用户名   
  function checkUserName(){ 
  var username = document.getElementById('userName'); 
  var errname = document.getElementById('nameErr'); 
  var pattern = /^\w{3,}$/;  //用户名格式正则表达式：用户名要至少三位 
  if(username.value.length == 0){ 
    errname.innerHTML="用户名不能为空"
    errname.className="error"
    return false; 
    } 
  if(!pattern.test(username.value)){ 
    errname.innerHTML="用户名不合规范"
    errname.className="error"
    return false; 
    } 
   else{ 
     errname.innerHTML="OK"
     errname.className="success"; 
     return true; 
     } 
  } 
  //验证密码   
function checkPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var errPasswd = document.getElementById('passwordErr'); 
  var pattern = /^\w{4,8}$/; //密码要在4-8位 
  if(!pattern.test(userpasswd.value)){ 
    errPasswd.innerHTML="密码不合规范"
    errPasswd.className="error"
    return false; 
    } 
   else{ 
     errPasswd.innerHTML="OK"
     errPasswd.className="success"; 
     return true; 
     } 
  } 
  //确认密码 
  function ConfirmPassword(){ 
  var userpasswd = document.getElementById('userPasword'); 
  var userConPassword = document.getElementById('userConfirmPasword'); 
  var errConPasswd = document.getElementById('conPasswordErr'); 
  if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){ 
    errConPasswd.innerHTML="上下密码不一致"
    errConPasswd.className="error"
    return false; 
    } 
   else{ 
     errConPasswd.innerHTML="OK"
     errConPasswd.className="success"; 
     return true; 
     }    
  } 
//验证手机号 
  function checkPhone(){ 
  var userphone = document.getElementById('userPhone'); 
  var phonrErr = document.getElementById('phoneErr'); 
  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
  if(!pattern.test(userphone.value)){ 
    phonrErr.innerHTML="手机号码不合规范"
    phonrErr.className="error"
    return false; 
    } 
   else{ 
     phonrErr.innerHTML="OK"
     phonrErr.className="success"; 
     return true; 
     } 
  } 
 //验证Email
  function checkMail1(){ 
  var mail1 = document.getElementById('mailad'); 
  var mailErr1 = document.getElementById('phoneErr1'); 
  var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //验证邮箱地址正确表达式 
  if(!pattern.test(mail1.value)){ 
    mailErr1.innerHTML="邮箱地址不合规范"
    mailErr1.className="error"
    return false; 
    } 
   else{ 
     mailErr1.innerHTML="OK"
     mailErr1.className="success"; 
     return true; 
     } 
  } 
</script>
</div>

<footer>
  <div id="down">
    <div id="down1"><table width="100%" border="0">
  <tr>
    <td width="82%"><img src="images/logo.png" width="110" height="30"></td>
    <td width="7%"><img src="images/douyin.png" width="31" height="31"></td>
    <td width="7%"><img src="images/weibo.png" alt="" width="31" height="31"></td>
    <td width="4%"><img src="images/weixin.png" alt="" width="31" height="31"></td>
  </tr>
</table>
</div>
  </div>
</footer>
</div>
</body>
</html>
